<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="edit">注册</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="!edit">商户资料</view>
			<view class="card">
				
				<view class="input_line">
					<text>店名：</text>
					<input class="input" type="text" v-if="edit" v-model="infor.shopName" placeholder="输入店名"/>
					<view>{{ merchant.name}}</view>
				</view>
				<view class="input_line">
					<text>经营区域：</text>
					<input class="input" type="text" v-if="edit" v-model="infor.shopArea" placeholder="选择区县"/>
					<view v-else>{{merchant.operating_area }}</view>
				</view>
				<view class="input_line">
					<text>注册时间：</text>
					<input class="input" type="text" v-if="edit" v-model="infor.shopArea" placeholder="选择区县"/>
					<view v-else>{{merchant.reg_time }}</view>
					</view>
				<view class="input_line">
					<text>开始营业时间：</text>
					<input class="input" type="text" v-if="edit" v-model="infor.shopArea" placeholder="选择区县"/>
					<view v-else>{{merchant.start_time}}</view>
					</view>
				<view class="input_line">
					<text>开始营业时间：</text>
					<input class="input" type="text" v-if="edit" v-model="infor.shopArea" placeholder="选择区县"/>
					<view v-else>{{merchant.end_time}}</view>
					</view>	
			</view>
		</view>	
		<view style="height: 400rpx;"></view>
		<view class="card">
			<view class="big_title">商家介绍</view>
			<textarea style="margin: 20rpx; padding: 10rpx; height: 200rpx; border: 1px solid gray; border-radius: 15px;" v-if="edit" v-model="infor.shopInfo" placeholder="请准确介绍一下公司"></textarea>
			<view v-else>{{ merchant.description }}</view>
		
		
		</view>
				<view class="card">
					<view class="idcard-row">
						<!-- 身份证正面 -->
						<view class="idcard-img-box">
							<view class="idcard-title">身份证正面</view>
							<image v-if="!edit && verification.front" 
									:src="verification.front" 
									mode="widthFix" 
									class="idcard-img" />
							<uni-file-picker
								v-if="edit"
								v-model="imageValue"  
								file-mediatype="image"
								mode="grid"
								@select="select"
							>
								<view class="upload-box">
									<view class="plus-icon">+</view>
									<view class="upload-text">上传身份证正面</view>
								</view>
							</uni-file-picker>
						</view>
						<!-- 身份证反面 -->
						<view class="idcard-img-box">
							<view class="idcard-title">身份证反面</view>
							<image v-if="!edit && verification.opposite" 
									:src="verification.opposite" 
									mode="widthFix" 
									class="idcard-img" />
							<uni-file-picker
								v-if="edit"
								v-model="imageValue"  
								file-mediatype="image"
								mode="grid"
								@select="select"
							>
								<view class="upload-box">
									<view class="plus-icon">+</view>
									<view class="upload-text">上传身份证反面</view>
								</view>
							</uni-file-picker>
						</view>
					</view>
				</view>
				
		</view>
				<view class="card">
					<view class="big_title">营业执照</view>
					<view style="margin: 20rpx; display: flex; justify-content: flex-start; align-items: center;">
					  <!-- 查看状态显示图片 -->
					  <image v-if="!edit && verification.businessLicenseImg" 
					         :src="verification.businessLicenseImg" 
					         mode="widthFix" 
					         style="width: 300rpx; border-radius: 10rpx;" />
					
					  <!-- 编辑状态显示上传控件 -->
					  <uni-file-picker
					    v-if="edit"
					    v-model="imageValue"  
					    file-mediatype="image"
					    mode="grid"
					    @select="select"
					  >
					    <view class="upload-box">
					        <view class="plus-icon">+</view>
					        <view class="upload-text">上传营业执照照片</view>
					    </view>
					  </uni-file-picker>
					</view>
						
					
			
		</view>
		<view class="card">
			<view class="big_title">门面照片</view>
			<view style="margin: 20rpx; display: flex; justify-content: flex-start; align-items: center;">
			  <!-- 查看状态显示图片 -->
			  <image v-if="!edit && merchant.photo" 
			         :src="merchant.photo" 
			         mode="widthFix" 
			         style="width: 300rpx; border-radius: 10rpx;" />
			
			  <!-- 编辑状态显示上传控件 -->
			  <uni-file-picker
			    v-if="edit"
			    v-model="imageValue"  
			    file-mediatype="image"
			    mode="grid"
			    @select="select"
			  >
			    <view class="upload-box">
			        <view class="plus-icon">+</view>
			        <view class="upload-text">上传门店照片</view>
			    </view>
			  </uni-file-picker>
			</view>
		</view>
		
	<button @click="edit=!edit" v-if="edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">保存</button>
		<button @click="edit=!edit" v-if="!edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">修改</button>

	
	
</template>

<script setup>
import { ref } from 'vue';
import request from '../../util/request.js';
import baseUrl from '../../util/urlConfig.js';

const idFrontUrl = ref('');  // 身份证人像面
const idBackUrl = ref('');   // 身份证国徽面
const licenseUrl = ref('');  // 营业执照
const shopPhotoUrl = ref('');  // 门面照片

const merchant = ref({
	     id:"",
	    name: '',
	    operating_area: '',
	    reg_time: '',
	    start_time: '',
	    end_time: '',
		longitude:'',
		latitude:'',
		status:'',
	    address: '',
	    description: '',
	    rate: 0,
	    photo: ''
})

const verification = ref({
		business_license_img:'',
		front:'',
		opposite:''
})


function director() {
	
	// const baseUrl = "http://localhost:9408"
	console.log(uni.getStorageSync("token"))
    request({
        url: baseUrl+`/wx/verification/list`,
        method: "GET",
        data: {
            name: verification.value.name,
            // address: merchant.value.address,
            // 其他查询条件...
        },
        success(res) {
			console.log(res);
            if (res.statusCode === 200) {
                console.log("查询结果:", res.data);
				 const data = res.data.rows[0];
					verification.value.business_license_img=data.business_license_img;
					verification.value.front=data.front;
					verification.value.opposite=data.opposite;
					console.log(verification.value.name)
					console.log(uni.getStorageSync("verification"))
            } else {
                console.error("查询失败:", res);
            }
        },
        fail(err) {
            console.error("请求失败:", err);
        }
    });
}


// 更完整的示例
function abc() {
	
	// const baseUrl = "http://localhost:9408"
	console.log(uni.getStorageSync("token"))
    request({
        url: baseUrl+`/wx/merchant/list`,
        method: "GET",
        data: {
            name: merchanta.value.name,
            // address: merchant.value.address,
            // 其他查询条件...
        },
        success(res) {
			console.log(res);
            if (res.statusCode === 200) {
                console.log("查询结果:", res.data);
				 const data = res.data.rows[0];
			        merchant.value.id = data.id;
			        merchant.value.name = data.name;
			        merchant.value.operating_area = data.operatingArea;
			        merchant.value.reg_time = data.regTime;
			        merchant.value.start_time = data.startTime;
			        merchant.value.end_time = data.endTime;
			        merchant.value.address = data.address;
			        merchant.value.description = data.description;
			        merchant.value.rate = data.rate;
			        merchant.value.photo = data.photo;
					merchant.value.longitude=data.longitude;
					merchant.value.photo=data.photo;
					console.log(merchant.value.name)
					console.log(uni.getStorageSync("merchant"))
            } else {
                console.error("查询失败:", res);
            }
        },
        fail(err) {
            console.error("请求失败:", err);
        }
    });
}

	function backPage(){
		uni.navigateBack()
	}

	
	
	const edit = ref(false);
	
	function onLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	
	const merchanta = ref({})
	
	function getMerchant(){
		merchanta.value = uni.getStorageSync("merchant");
	}
	
	const verificationa = ref({})
	
	function getverification(){
		verification.value = uni.getStorageSync("VMerchant");
		console.log(verification.value)
	}
	getverification();
	getMerchant();
	abc();
	director();     
	
	
	
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.input_line{ font-weight: 500; margin: 30rpx 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center;}
.input{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; }
.big_title{margin-left: 20rpx; font-weight: 600;}	    
.upload-box {display: flex;flex-direction: column; align-items: center;cursor: pointer;}
.plus-icon {font-size: 40px; color: #ccc; margin-bottom: 10px;}
.upload-text {font-size: 12px; color: #999;}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  

.idcard-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.idcard-img-box {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.idcard-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.idcard-img {
  max-width: 100%;
  width: 260rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
}

</style>
